/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-18 10:37:17
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useState, useEffect } from "react";
import { Breadcrumb, Col, DatePicker, Input, Row, Empty, Select, message, Divider, List, Typography, Avatar } from "antd";
import { ClockCircleOutlined, UserOutlined } from "@ant-design/icons";
import _ from "lodash";
import moment from "moment";
import styled from "styled-components";
import { useNavigate, NavLink, Route, Routes, useLocation } from "react-router-dom";
import { formatDataSource } from "@/utils";

const CList = ({ className, props }) => {
	if (!props) return '';
	const [loading, setLoading] = useState(false);
	const [dataSource, setDataSource] = useState([]);

	const [total, setTotal] = useState(0);
	const [pageindex, setPageindex] = useState(props?.pageindex || 1);
	const [pagesize, setPagesize] = useState(props?.pagesize || 10);
	const [reload, setReload] = useState(false);

	const [sorter, setSorter] = useState(null);
	const [filter, setFilter] = useState(null);

	const pagination = {
		total,
		size: "small",
		position: "both",
		current: pageindex,
		pageSize: pagesize,
		showSizeChanger: true,
		showQuickJumper: true,
		onChange: (i, size) => {
			// console.log("i, size", i, size);
			if (props.cacheKey) {
				window.cache[props.cacheKey] = i;
			}
			setPageindex(i);
			setPagesize(size);
			setReload(!reload);
		},
		showTotal: total => `Total ${total}`
	};
	if (props?.table && props?.table.columns && !props.table.renderItem) {
		props.table.renderItem = item => {
			return (
				<div className="block-list-box block" key={item.id}>
					{props.table.columns.map(c => {
						let k = c.key || c.dataIndex;
						let v = item[c.dataIndex];
						return (
							<div className={c.fullLine ? "mlist-item-full" : "mlist-item"} key={k}>
								<div className="mlist-left">{c.title}</div>
								<span className="mlist-right">
									{v}
									{c.label ? <label>({item[c.label]})</label> : ""}
								</span>
							</div>
						);
					})}
				</div>
			);
		};
	}

	//ajax post
	useEffect(async () => {
		if (!props?.table?.columns) {
			return;
		}
		const columns = _.cloneDeep(props.table.columns);
		function s(data) {
			formatDataSource(columns, data);
			setDataSource(data);
		}
		if (props.table && props.table.dataSource) {
			const ds = _.cloneDeep(props.table.dataSource);
			return s(ds);
		}
		setLoading(true);
		let params = {};
		if (props.loadList?.params) {
			params = _.cloneDeep(props.loadList.params);
		}
		params.pageindex = pageindex;
		if (props.cacheKey&&window.cache?.isBack) {
			let cachePageindex = window.cache[props.cacheKey];
			if (cachePageindex) {
				params.pageindex = cachePageindex;
				setPageindex(cachePageindex);
			}
		}
		params.pagesize = pagesize;
		if (sorter) {
			params.sorter = [
				{
					column: sorter.column,
					order: sorter.order
				}
			];
		}
		if (filter) {
			params.filter = filter;
			params.filterType = "and";
		}
		let result = await props.loadList?.method(params);
		if (!result || result.msg != "ok") {
			return;
		}
		result.data.forEach((t, i) => {
			if (!t.key) {
				t.key = t.id || i;
			}
		});
		s(result.data);
		setTotal(result.total || result.data.length);
		setLoading(false);
	}, [reload]);

	return (
		<div className={className}>
			<List
				itemLayout="horizontal"
				dataSource={dataSource}
				loading={loading}
				size={props?.size}
				pagination={props?.hidePager ? false : pagination}
				renderItem={props?.table?.renderItem}
			/>
		</div>
	);
};

export default React.memo(styled(CList)`
	display: block;
	.block-list-box {
		position: relative;
		display: block;
		padding: 11px 10px;
		width: calc(100% - 20px);
		line-height: 27px;
		background-color: #fff;
		border: none;
		border-radius: 5px;
		box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.1);
		margin-top: 14px;
		.mlist-item {
			clear: both;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.mlist-left {
				display: block;
				overflow: hidden;
				clear: both;
				line-height: 40px;
			}
			.mlist-right{
				display: block;
			}
		}
		.mlist-item-full {
			clear: both;
			display: flex;
			flex-direction: column;
			margin: 20px 0;
			.mlist-left {
				display: block;
				overflow: hidden;
				clear: both;
				line-height: 28px;
				color: #6B7486;
				width:100%;
			}
			.mlist-right{
				display: block;
				color: #000;
				line-height: 28px;
				width:100%;
				word-wrap: break-word; 
				overflow-wrap: break-word;
			}
		}
	}
`);
